<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>后台</title>

    <!-- Bootstrap -->
    <link href="/resource/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="/resource/css/dropdowns-enhancement.css"/>
    <link rel="stylesheet" href="/resource/css/bootstrap-datetimepicker.min.css"/>
    <link rel="stylesheet" href="/resource/js/tagEditor/jquery.tag-editor.css"/>
    <link rel="stylesheet" href="/resource/css/bootstrap-switch.min.css"/>
    <link rel="stylesheet" href="/resource/css/croppic.css"/>
    <link rel="stylesheet" href="/resource/css/admin.css"/>
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="/resource/js/vendor/html5shiv.js"></script>
    <script src="/resource/js/vendor/respond.min.js"></script>
    <![endif]-->
    <style>
        #cropContaineroutput {
            border: 1px solid #ccc;
            background-color: #f7f7f7;
            background-image: url("/resource/img/placeholder.png");
            background-repeat: no-repeat;
            background-position: center center;
            width: 838px;
            height: 202px;
            position: relative;
        }
    </style>
</head>
<body>
<% include ../Admin/include/nav.html %> <!--顶部导航-->


<div class="container">
    <div class="row">
        <div class="col-sm-3 col-md-2">
            <% include ../Admin/include/sidebar.html %> <!--左侧菜单-->

        </div>
        <div class="col-sm-9 col-md-10 main">
            <h4 class="page-header"><span aria-hidden="true" class="glyphicon glyphicon-pencil"></span> 写文章</h4>

            <form id="articleadd" action="/admin/article/add" method="post">
                <div class="form-group">
                    <label for="title" class="sr-only control-label">标题</label>

                    <div class="input-group">
                        <div class="input-group-btn ">
                            <a data-label-placement="" data-placeholder="Please select"
                                    class="btn btn-default">选择分类
                            </a>
                            <button class="btn btn-default dropdown-toggle" data-toggle="dropdown"><span
                                    class="caret"></span></button>
                            <ul class="dropdown-menu">
                                <li>
                                    <input type="radio" checked="" value="0" name="cateid" id="cateid2_2_1">
                                    <label for="cateid2_2_1"><i class="icon-edit"></i> 选择分类</label>
                                </li>
                                <% category.forEach(function(item){ %>
                                <li>
                                    <input type="radio" value="<%=item.cid%>" name="cateid" id="cid<%=item.cid%>_<%=item.pid%>_<%=item.deep%>">
                                    <label for="cid<%=item.cid%>_<%=item.pid%>_<%=item.deep%>"><i class="icon-remove"></i>|-<%=new Array(item.deep*2).join("-")%> <%=item.catename%></label>
                                </li>
                                <% }) %>

                            </ul>
                        </div>
                        <input type="text" class="form-control" id="title" placeholder="输入标题 ..." required="required" name="title">

                    </div>
                </div>

                <div class="form-group row">
                    <div class="col-md-8">
                        <label class="control-label" for="dtp_input1">标签</label>
                        <textarea id="tags" name="tags" placeholder="输入标签 ..."></textarea>
                    </div>
                    <div class="col-md-4">
                        <label class="control-label" for="dtp_input1">发布时间</label>

                        <div class="input-group date form_datetime" data-date="2012-06-15 14:45"
                             data-date-format="yyyy-mm-dd hh:ii" data-link-field="dtp_input1">
                            <input class="form-control" id="time" size="16" type="text" value="" readonly>
                            <span class="input-group-addon"><span class="glyphicon glyphicon-remove"></span></span>
                            <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
                        </div>
                        <input type="hidden" id="dtp_input1" value=""/>
                    </div>
                </div>
                <div class="form-group">
                    <label class="control-label">缩略图 <small class="type-info">{ 宽:836px,高:200px }</small> <a href="#cropContaineroutput" aria-controls="cropContaineroutput" data-toggle="collapse"> 添加 <span class="caret"></span></a></label>
                    <div id="cropContaineroutput" class="collapse panel-collapse"></div>
                    <input type="hidden" name="attnum"  id="cropOutput">
                </div>

                <div class="form-group">
                    <label class="control-label">内容</label>
                    <script id="content" name="content" type="text/plain" style="height:500px;"></script>
                </div>
               <div class="panel panel-default">
                  <div class="panel-heading">
                      <a aria-controls="collapseExample" aria-expanded="true" href="#collapseExample" data-toggle="collapse" class="btn btn-sm btn-info">
                          高级选项  <span class="caret"></span>
                      </a>
                  </div>



                <div class="collapse panel-collapse panel-body" id="collapseExample">
                <div class="form-group">
                    <label class="control-label" for="excerpt">简介</label>
                    <textarea class="form-control" id="excerpt" name="excerpt" rows="3"></textarea>

                </div>
                <div class="form-group row">

                    <div class="col-md-4">
                        <label class="control-label" for="alias">别名</label>
                        <input type="text" class="form-control" id="alias" placeholder="输入别名 ..." name="alias">
                    </div>
                    <div class="col-md-4"><label class="control-label" for="password">访问密码</label>
                        <input type="text" class="form-control" id="password" placeholder="输入访问密码 ..." name="password">
                    </div>
                    <div class="col-md-4"><label class="control-label">模板</label>

                        <div class="">
                            <div class="btn-group ">
                                <a data-label-placement="" data-placeholder="Please select"
                                        class="btn btn-default">选择模板
                                </a>
                                <button class="btn btn-default dropdown-toggle" data-toggle="dropdown"><span
                                        class="caret"></span></button>
                                <ul class="dropdown-menu">
                                    <li>
                                        <input type="radio" checked="" value="1" name="template" id="ex2_2_1">
                                        <label for="ex2_2_1"><i class="icon-edit"></i> Edit</label>
                                    </li>
                                    <li>
                                        <input type="radio" value="2" name="template" id="ex2_2_2">
                                        <label for="ex2_2_2"><i class="icon-remove"></i> Remove</label>
                                    </li>
                                    <li>
                                        <input type="radio" value="3" name="template" id="ex2_2_3">
                                        <label for="ex2_2_3"><i class="icon-print"></i> Print</label>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="form-group row">
                    <div class="col-md-2">
                        <label class="control-label" for="top">首页置顶</label>
                        <input id="top" name="top" type="checkbox" data-off-text="否" data-on-text="是"></div>
                    <div class="col-md-2">
                        <label class="control-label" for="sortop">分类置顶</label>
                        <input id="sortop" name="sortop" type="checkbox" data-off-text="否" data-on-text="是">
                    </div>
                    <div class="col-md-2">
                        <label class="control-label" for="allow_remark">允许评论</label>
                        <input id="allow_remark" name="allow_remark" type="checkbox"  data-off-text="否" data-on-text="是" checked></div>
                </div>
                </div>
                    </div>
                <hr/>
                <div class="">
                <input type="hidden" name="author" value="<%=user.uid%>" >
                <button type="submit" class="btn btn-primary">发布文章</button>
                    <div class="checkbox btn">
                        <label >
                            <input type="checkbox" name="hide" value="on"> 保存草稿
                        </label>
                    </div>
                </div>
            </form>


        </div>
    </div>
</div>
<% include ../Admin/include/footer.html %>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="/resource/js/jquery.min.js"></script>
<script src="/resource/js/bootstrap.min.js"></script>
<script src="/resource/js/jquery-ui.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script SRC="/resource/js/bootstrap-datetimepicker.min.js"></script>
<script src="/resource/js/dropdowns-enhancement.min.js"></script>
<script src="/resource/js/locales/bootstrap-datetimepicker.zh-CN.js"></script>
<script src="/resource/js/tagEditor/jquery.tag-editor.min.js"></script>
<script src="/resource/js/bootstrap-switch.min.js"></script>
<script type="text/javascript" charset="utf-8" src="/resource/js/ueditor/ueditor.config.js"></script>
<script type="text/javascript" charset="utf-8" src="/resource/js/ueditor/ueditor.all.min.js"></script>
<!--建议手动加在语言，避免在ie下有时因为加载语言失败导致编辑器加载失败-->
<!--这里加载的语言文件会覆盖你在配置项目里添加的语言类型，比如你在配置项目里配置的是英文，这里加载的中文，那最后就是中文-->
<script type="text/javascript" charset="utf-8" src="/resource/js/ueditor/lang/zh-cn/zh-cn.js"></script>
<script type="text/javascript" src="/resource/js/jquery.mousewheel.min.js"></script>
<script type="text/javascript" src="/resource/js/croppic.min.js"></script>
<script>
    var croppicContaineroutputOptions = {
        uploadUrl:'/admin/article/imgsave',
        cropUrl:'/admin/article/imgcrop',//TODO nodejs上传的缩略图根据定义尺寸裁剪
        outputUrlId:'cropOutput',
        modal:false,
        rotateControls: false,
        loaderHtml:'<div class="loader bubblingG"><span id="bubblingG_1"></span><span id="bubblingG_2"></span><span id="bubblingG_3"></span></div> '
    }
    var cropContaineroutput = new Croppic('cropContaineroutput', croppicContaineroutputOptions);

    //实例化编辑器
    //建议使用工厂方法getEditor创建和引用编辑器实例，如果在某个闭包下引用该编辑器，直接调用UE.getEditor('editor')就能拿到相关的实例
    var ue = UE.getEditor('content')
    $('.form_datetime').datetimepicker({
        language: 'zh-CN',
        weekStart: 1,
        todayBtn: 1,
        autoclose: 1,
        todayHighlight: 1,
        startView: 2,
        forceParse: 0,
        showMeridian: 1
    });
    // jQuery UI autocomplete extension - suggest labels may contain HTML tags
    // github.com/scottgonzalez/jquery-ui-extensions/blob/master/src/autocomplete/jquery.ui.autocomplete.html.js
    (function ($) {
        var proto = $.ui.autocomplete.prototype, initSource = proto._initSource;

        function filter(array, term) {
            var matcher = new RegExp($.ui.autocomplete.escapeRegex(term), "i");
            return $.grep(array, function (value) {
                return matcher.test($("<div>").html(value.label || value.value || value).text());
            });
        }

        $.extend(proto, {
            _initSource: function () {
                if (this.options.html && $.isArray(this.options.source)) {
                    this.source = function (request, response) {
                        response(filter(this.options.source, request.term));
                    };
                } else {
                    initSource.call(this);
                }
            }, _renderItem: function (ul, item) {
                return $("<li></li>").data("item.autocomplete", item).append($("<a></a>")[this.options.html ? "html" : "text"](item.label)).appendTo(ul);
            }
        });
    })(jQuery);

    var cache = {};
    function googleSuggest(request, response) {
        var term = request.term;
        if (term in cache) {
            response(cache[term]);
            return;
        }
        var url = 'http://query.yahooapis.com/v1/public/yql';
        url =  '/admin/tag/tagQuery';
//        $.ajax({
//            url : url,
//            dataType: 'JSONP',
//            data: {
//                format: 'json',
//                q: 'select * from xml where url="http://google.com/complete/search?output=toolbar&q=' + term + '"'
//            },//TODO 陈金龙
//            success: function (data) {
//                alert(111);
//                var suggestions = [];
//                try {
//                    alert(121);
//                    var results = data.query.results.toplevel.CompleteSuggestion;
//                } catch (e) {
//                    var results = [];
//                }
//                $.each(results, function () {
//                    try {
//                        alert(131);
//                        var s = this.suggestion.data.toLowerCase();
//                        suggestions.push({label: s, value: s}); //s.replace(term, '<b>' + term + '</b>')
//                    } catch (e) {
//                    }
//                });
//                cache[term] = suggestions;
//                response(suggestions);
//            }
//        });
        $.get(url+"?term="+term,function(data){
            var suggestions = [];
                try {
                    var results = data.query.results.toplevel.CompleteSuggestion;
                } catch (e) {
                    var results = [];
                }
                $.each(results, function () {
                    try {
                        var s = this.suggestion.data.toLowerCase();
                        suggestions.push({label: s, value: s}); //s.replace(term, '<b>' + term + '</b>')
                    } catch (e) {
                    }
                });
                cache[term] = suggestions;
                response(suggestions);
        },"json");
    }

    $(function () {
        $('#tags').tagEditor({
            placeholder: '输入关键词 ...',
            autocomplete: {source: googleSuggest, minLength: 1, delay: 250, html: true, position: {collision: 'flip'}}
        });
        $("[name='top']").bootstrapSwitch();
        $("[name='sortop']").bootstrapSwitch();
        $("[name='allow_remark']").bootstrapSwitch();
        var date= new Date();
        var y=date.getFullYear();
        var M=date.getMonth()+1;
            M=M<10?"0"+M:M;
        var d=date.getDate();
            d=d<10?"0"+d:d;
        var h=date.getHours();
        h=h<10?"0"+h:h;
        var m=date.getMinutes();
        m=m<10?"0"+m:m;
        var time= y+"-"+M+"-"+d+" "+h+":"+m;
        $("#time").val(time);

        $('#articleadd').submit(function(){
            var isnull=$("#excerpt").val();
            if(!isnull) {
                var cont = UE.getEditor('content').getContentTxt().trim();
                var result = cont.replace(/(^\s+)|(\s+$)/g, "");
                result = result.replace(/\s/g, "");
                var excerpt = result.substr(0, 200);
                $("#excerpt").text(excerpt);
            }

        })
    });
</script>
</body>
</html>